<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">番茄专注</block>
		</cu-custom>
		<view class="top">
			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @change="changeLog" :border='false'
					 />
			</view>
		</view>

		<view class="box" >
			<view class="content">
				<view class="tag">
					<uni-data-select v-model="tag" :localdata="range" @change="change"
						placeholder='请选择标签'></uni-data-select>
					<view class="detail" @click="detail">
						查看今日详情
					</view>
				</view>
				<view class="choose">
					<view class="tomato" @click="clicktomato">番茄钟</view>
					<view class="countdown" @click="countdown">倒计时</view>
				</view>
				<view class="circle" v-if="!flag" >
					<van-circle :value="value" stroke-width="12" :text="time" size='190' layer-color="#eee"
						color="#FDD692" />
					<view class="Function">
						<view class="starttomato" @click="starttomato" v-if="!isstart">
							<van-icon name="play-circle-o" size='45rpx' />
							<text>继续</text>
						</view>
						<view class="pause" @click="pause" v-else>
							<van-icon name="pause-circle-o" size='45rpx' />
							<text>暂停</text>
						</view>
						<view class="reset" @click="resettomato">
							<van-icon name="replay" size='45rpx' />
							<text>重置</text>
						</view>
					</view>
				</view>
				<view class="circle" v-else  >
					<view @click='choosetime' >
						<van-circle :value="countdownval" stroke-width="12" :text="countdowntime" size='190'
							layer-color="#eee" color="#FDD692"/>
					</view>
					<view class="Function">
						<view class="startcountdown" @click="startcountdown" v-if="!isstart">
							<van-icon name="play-circle-o" size='45rpx' />
							<text>继续</text>
						</view>
						<view class="pause" @click="pause" v-else>
							<van-icon name="pause-circle-o" size='45rpx' />
							<text>暂停</text>
						</view>
						<view class="reset" @click="resetcountdown">
							<van-icon name="replay" size='45rpx' />
							<text>重置</text>
						</view>
					</view>
				</view>
				<view class="start" @click="start" v-if="!isstart&&!isrest">开始专注</view>
				<view class="start" @click="start" v-else-if="isstart&&isrest">休息中</view>
				<view class="start" v-else>专注中</view>
			</view>
			<view class="statements">
				<view class="left">
					<view class="text">
						今日已专注
					</view>
					<image src="../../static/strolling.png" mode="widthFix"></image>
					<text>{{timelength}}分钟</text>
				</view>
				<view class="right">
					<view class="text">
						今日已专注
					</view>
					<image src="../../static/BalletDoodle.png" mode="widthFix"></image>
					<text>{{timenum}}次</text>
				</view>

			</view>
		</view>
		
		<van-popup :show="show" round position="bottom" custom-style="height: 50%" @close="onClose" z-index='200'>
			<van-datetime-picker type="time" :value="chooseDate" @input="onInput" title='选择时间' @confirm='confirm'
				:formatter="formatter" min-minute='1' @cancel='onClose' />
		</van-popup>
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import Dialog from '@/wxcomponents/@vant/weapp/dialog/dialog';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				tag: 0,
				single: '',
				value: 100,
				countdownval: 100,
				minutes: '25',
				seconds: '00',
				countdownminutes: '00',
				countdownseconds: '00',
				indexminutes: '00',
				indexseconds: '00',
				timer: null,
				target: 25,
				flag: 0,
				isstart: 0,
				show: false,
				chooseDate: '',
				countdowntarget: 0,
				isrest: false,
				resttarget: 5,
				timelength: 0,
				timenum: 0,
				show1:false,
				formatter(type, value) {
					if (type === 'hour') {
						return `${value}小时`;
					}
					if (type === 'minute') {
						return `${value}分钟`;
					}
					return value;
				},
				range: [{
						value: 0,
						text: "学习"
					},
					{
						value: 1,
						text: "锻炼"
					},
					{
						value: 2,
						text: "休息"
					},
					{
						value: 3,
						text: "其他"
					}
				],
				data: [0, 0, 0, 0],
			};
		},
		onLoad() {
			
			this.single = this.nowtime
			if (!this.tomatoinfo.length) this.gettomato()
			this.finddetail()
			this.onFeedTap()
		},
		onShow() {
			this.single = this.nowtime
			if (!this.tomatoinfo.length) this.gettomato()
			this.finddetail()
		},
		computed: {
			...mapState('m_tomato', ['tomatoinfo']),

			nowtime() {
				// 获取当前时间  
				var now = new Date();
				// 获取年月日  
				var year = now.getFullYear();
				var month = now.getMonth() + 1; // getMonth() 方法返回的月份从0开始，因此需要加1  
				var day = now.getDate();

				return year + "-" + month + "-" + day;
			},
			time() {
				return this.minutes + ":" + this.seconds
			},
			countdowntime() {
				return this.countdownminutes + ":" + this.countdownseconds
			}
		},
		methods: {
			...mapMutations('m_tomato', ['updatetomatoinfo']),
			onFeedTap() {
				let platform=uni.getSystemInfoSync().platform
				// #ifdef APP-PLUS
				if (platform == "ios") {
					let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
					let impact = new UIImpactFeedbackGenerator();
					impact.prepare();
					impact.init(1);
					impact.impactOccurred();
				}
				if (platform == "android") {
					uni.vibrateShort();
				}
				// #endif
			},
			async gettomato() {
				try {
					const data = await uni.$http.get('/get/gettomato')
					if (data.data.status === 0) this.updatetomatoinfo(data.data.data)
				} catch (e) {
					//TODO handle the exception
				}

			},
			finddetail() {
				this.timenum = 0
				this.timelength = 0
				this.data = this.data.map(() => 0);
				this.tomatoinfo.forEach(item => {
					if (item.date === this.single) {
						this.timenum++
						this.timelength += item.time
						if (item.tag === '学习') {
							this.data[0] += item.time
						} else if (item.tag === '锻炼') {
							this.data[1] += item.time
						} else if (item.tag === '休息') {
							this.data[2] += item.time
						} else {
							this.data[3] += item.time
						}
					}
				})
				if(this.nowtime!=this.single)
				{
					this.detail()
				}

			},
			startCountdown() {
				this.isstart = 1
				this.isrest = 0
				if (!this.flag) {
					this.timer = setInterval(async () => {
						this.minutes = Number(this.minutes)
						this.seconds = Number(this.seconds)
						let distance = (this.minutes * 60 + this.seconds);
						if (distance <= 0) {
							this.minutes = "0" + this.minutes; // 如果分钟数小于等于9，则在前面加0  
							this.seconds = "0" + this.seconds; // 如果秒数小于等于9，则在前面加0  
							this.minutes = '05'
							this.value = 100
							let array = [...this.tomatoinfo]
							array.push({
								date: this.single,
								tag: this.range[this.tag].text,
								time: this.target
							})
							const result = await uni.$http.post('/update/updatetomatoinfo', {
								tomatoinfo: array
							})
							if (result.data.status === 0) {
								this.updatetomatoinfo(array)
								this.finddetail()
							}
							clearInterval(this.timer); // 倒计时结束，清除定时器  
							if (this.target) {
								Dialog.alert({
									message: `恭喜已专注${this.target}分钟,休息5分钟吧！`,
									theme: 'round-button',
								}).then(() => {
									this.target = 25
									this.startrest()
								});
							}

						} else {
							distance--;
							this.minutes = Math.floor(distance / 60); // 计算分钟数;  
							this.seconds = distance % 60;

							if (this.minutes <= 9) {
								this.minutes = "0" + this.minutes; // 如果分钟数小于等于9，则在前面加0  
							}

							if (this.seconds <= 9) {
								this.seconds = "0" + this.seconds; // 如果秒数小于等于9，则在前面加0  
							}
							this.value = (distance / (this.target * 60)) * 100;
						}
					}, 1000); // 每秒更新一次倒计时数据 
				} else {
					this.timer = setInterval(async () => {
						this.countdownminutes = Number(this.countdownminutes)
						this.countdownseconds = Number(this.countdownseconds)
						let distance = (this.countdownminutes * 60 + this.countdownseconds);
						if (distance <= 0) {
							this.isstart = 0
							this.countdownminutes = "0" + this.countdownminutes; // 如果分钟数小于等于9，则在前面加0  
							this.countdownseconds = "0" + this.countdownseconds; // 如果秒数小于等于9，则在前面加0  
							this.countdownval = 100
							if (this.countdowntarget != 0) {
								let array = [...this.tomatoinfo]
								array.push({
									date: this.single,
									tag: this.range[this.tag].text,
									time: this.countdowntarget
								})
								const result = await uni.$http.post('/update/updatetomatoinfo', {
									tomatoinfo: array
								})
								if (result.data.status === 0) {
									this.updatetomatoinfo(array)
									this.finddetail()
								}
							}
							clearInterval(this.timer); // 倒计时结束，清除定时器  
							if (this.countdowntarget) {
								Dialog.alert({
									message: `恭喜已专注${this.countdowntarget}分钟`,
									theme: 'round-button',
								}).then(() => {
									// on close
								});
							}
							this.countdownminutes = '00'
							this.countdowntarget = 0
						} else {
							distance--;
							this.countdownminutes = Math.floor(distance / 60); // 计算分钟数;  
							this.countdownseconds = distance % 60;

							if (this.countdownminutes <= 9) {
								this.countdownminutes = "0" + this.countdownminutes; // 如果分钟数小于等于9，则在前面加0  
							}

							if (this.countdownseconds <= 9) {
								this.countdownseconds = "0" + this.countdownseconds; // 如果秒数小于等于9，则在前面加0  
							}
							this.countdownval = (distance / (this.countdowntarget * 60)) * 100;
						}
					}, 1000); // 每秒更新一次倒计时数据 
				}
			},
			stopCountdown() {
				this.isstart = 0
				this.isrest = 0
				clearInterval(this.timer);
			},
			clicktomato() {
				if (this.isstart) return
				this.minutes = '25'
				this.seconds = '00'
				this.flag = 0;
			},
			countdown() {
				if (this.isstart) return
				this.countdownminutes = '00'
				this.countdownseconds = '00'
				this.flag = 1;
			},
			change(e) {
				this.show1=true
			},
			start() {
				this.startCountdown()
			},
			choosetime() {
				this.show = true
			},
			changeLog() {
				this.finddetail()
				this.show1=true
			},
			onInput(e) {
				this.indexminutes = Number(this.indexminutes)
				this.indexminutes = Number(e.detail.split(':')[0]) * 60 + Number(e.detail.split(':')[1])
				if (this.indexminutes < 9) this.indexminutes = '0' + this.indexminutes
				else this.indexminutes += ''
			},
			confirm() {
				this.countdownminutes = this.indexminutes
				this.countdowntarget = Number(this.indexminutes)
				this.show = false
			},
			cancel() {
				this.indexminutes = '00'
				this.show = false
			},
			onClose() {
				this.show = false
			},
			startcountdown() {
				this.startCountdown()
				this.isstart = 1
			},
			starttomato() {
				this.startCountdown()
				this.isstart = 1
			},
			pause() {
				this.stopCountdown()
			},
			resettomato() {
				this.stopCountdown()
				this.minutes = '25'
				this.seconds = '00'
				this.target = 25
				this.startCountdown()
			},
			resetcountdown() {
				this.stopCountdown()
				this.countdownminutes = this.indexminutes
				this.countdownseconds = this.indexseconds
				this.target = Number(this.indexminutes)
				this.startCountdown()
			},
			startrest() {
				this.timer = setInterval(() => {
					this.isrest = 1
					this.minutes = Number(this.minutes)
					this.seconds = Number(this.seconds)
					let distance = (this.minutes * 60 + this.seconds);
					if (distance <= 0) {
						this.isrest = 0
						this.minutes = "0" + this.minutes; // 如果分钟数小于等于9，则在前面加0  
						this.seconds = "0" + this.seconds; // 如果秒数小于等于9，则在前面加0  
						this.minutes = '25'
						this.value = 100
						clearInterval(this.timer); // 倒计时结束，清除定时器  
						if (this.target) {
							Dialog.alert({
								message: `休息时间结束，继续学习吧！`,
								theme: 'round-button',
							}).then(() => {
								this.resttarget = 5
								this.startCountdown()
							});
						}

					} else {
						distance--;
						this.minutes = Math.floor(distance / 60); // 计算分钟数;  
						this.seconds = distance % 60;

						if (this.minutes <= 9) {
							this.minutes = "0" + this.minutes; // 如果分钟数小于等于9，则在前面加0  
						}

						if (this.seconds <= 9) {
							this.seconds = "0" + this.seconds; // 如果秒数小于等于9，则在前面加0  
						}
						this.value = (distance / (this.resttarget * 60)) * 100;
					}
				}, 1000); // 每秒更新一次倒计时数据 
			},
			detail(){
				uni.navigateTo({
					url:'/subpkg/focuseddetail/focuseddetail?data='+encodeURIComponent(JSON.stringify(this.data))+'&target='+this.single,
				})
			}
		}


	}
</script>

<style lang="less">
	.top {
		display: flex;
		height: 120rpx;
		line-height: 120rpx;
		align-items: center;
		justify-content: center;

	}

	.content {
		width: 100%;
		display: flex;
		margin-top: 50rpx;
		flex-direction: column;

		.tag {
			// width: 25%;
			// margin-left: 290rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.detail{
				padding: 16rpx;
				margin-left: 50rpx;
				border: 1px solid #eee;
				border-radius: 5rpx;
			}
		}

		.choose {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 50rpx 0rpx;

			.tomato {
				background-color: #f8ecc9;
				margin-right: 50rpx;
				height: 75rpx;
				padding: 0rpx 55rpx;
				border-radius: 20rpx;
				line-height: 75rpx;
				text-align: center;
				margin-right: 70rpx;
			}

			.countdown {
				padding: 0rpx 55rpx;
				background-color: #f8ecc9;
				height: 75rpx;
				border-radius: 20rpx;
				line-height: 75rpx;
				text-align: center;
				margin-left: 70rpx;
			}
		}

		.circle {
			z-index: 1;
			font-size: 70rpx;
			font-weight: 800;
			display: flex;
			margin-left: 170rpx;

			.Function {
				font-size: 30rpx;
				font-weight: 400;
				margin-left: 40rpx;
				margin-top: 30rpx;

				.starttomato,
				.startcountdown,
				.pause,
				.reset {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					height: 100rpx;
					flex-direction: column;
					border-top: 1rpx solid #eee;
					border-left: 1rpx solid #eee;
					border-right: 1rpx solid #eee;
				}
			}
		}

		.start {
			background-color: #f8ecc9;
			width: 55%;
			height: 75rpx;
			border-radius: 20rpx;
			line-height: 75rpx;
			text-align: center;
			margin-top: 75rpx;
			margin-left: 150rpx;
		}
	}

	.statements {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 40rpx;
		font-size: 35rpx;
		font-weight: 600;

		image {
			padding-top: 20rpx;
			margin-left: 50rpx;
			width: 220rpx;
			height: 200rpx;
		}

		.left {
			width: 45%;
			// width: 300rpx;
			height: 310rpx;
			background-color: #f8ecc9;
			border-radius: 30rpx;
			padding-top: 20rpx;

			// margin-bottom: 100rpx;
			.text {
				margin-left: 30rpx;
			}

			text {
				font-size: 40rpx;
				font-weight: 800;
				margin-left: 100rpx;
			}
		}

		.right {
			// width: 300rpx;
			width: 45%;
			height: 310rpx;
			background-color: #f8ecc9;
			border-radius: 30rpx;
			padding-top: 20rpx;

			// margin-bottom: 100rpx;
			.text {
				margin-left: 30rpx;
			}

			text {
				font-size: 40rpx;
				font-weight: 800;
				margin-left: 165rpx;
			}
		}

		.buttom {
			width: 90%;
			margin-top: 50rpx;
		}
	}

	.charts {
		width: 93%;
		margin-left: 20rpx;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
	}
</style>